<script lang="ts" setup>
import to from 'await-to-js'
import Detail from './detail.vue'
import Details from './details.vue'
import Off from './off.vue'
import OneTable from '@/component/public/table/oneTable.vue'
import type { UserInfo, HandleType } from './data'
import { getAbilityList, getOperationList } from '@/utils/data'

defineOptions({
  name: 'TableList'
})

const defaultForm = () => {
  return {}
}
const activeName = ref('1')
const tableData = ref<any[]>([
  {
    version: 'API_2.25_java',
    sjzt: '已下架',
    method: 'API',
    orgName: '重庆',
    Request_No: '100100007',
    time: '2024/1/9 21:10:10',
    applyUser: '义诚',
    status: 1,
    xjRequest_No: 'A00100200001',
    name: 'PCC策略管理',
    type: '行业能力',
    miaoshu: '提供PCC策略管理、机卡绑定和区域限制等能力',
    banner: '',
    gushushen: '重庆',
    tigongfang: '中移物联网公司',
    lianxiren: '吉小天',
    lianxiphone: '13715150077',
    zhuangtai: '已评审',
    shangchuanren: '重庆公司',
    shangchuantime: '2024/1/9 21:10:10',
    shenheren: '',
    shenpitime: '',
    shenpiyijian: '',
    id: '56ea8332a16448c6a8e350e910ed244c',
    inner: [
      {
        Request_No: 'S00100200001',
        name: '能力名称',
        orgName: '重庆',
        version: 'API_2.0_java'
      },
      {
        Request_No: 'S00100200001',
        name: '能力名称',
        orgName: '重庆',
        version: 'API_2.0_java'
      },
      {
        cjRequest_No: '100100003',
        Request_No: 'S00100200001',
        name: '能力名称',
        orgName: '重庆',
        version: 'API_2.0_java'
      }
    ]
  },
  {
    id: 'e4b0ebda79c148cfb54eb417c5f6e216',
    version: 'API_2.26_java',
    sjzt: '已下架',
    method: 'SDK',
    orgName: '重庆',
    Request_No: '100100008',
    time: '2024/1/10 21:10:10',
    applyUser: '麟超',
    status: 1,
    xjRequest_No: 'A00100200002',
    name: '物联卡定位',
    type: '行业能力',
    miaoshu: '提供基站定位经纬度、区号定位区域编码等能力',
    banner: '',
    gushushen: '重庆',
    tigongfang: '中移物联网公司',
    lianxiren: '麟超',
    lianxiphone: '18351078990',
    zhuangtai: '已评审',
    shangchuanren: '重庆公司',
    shangchuantime: '2024/1/10 21:10:10',
    shenheren: '',
    shenpitime: '',
    shenpiyijian: '',
    inner: [
      {
        Request_No: 'S00100200001',
        name: '能力名称',
        orgName: '重庆',
        version: 'API_2.0_java'
      },
      {
        Request_No: 'S00100200001',
        name: '能力名称',
        orgName: '重庆',
        version: 'API_2.0_java'
      }
    ]
  },
  {
    id: '934dbb1c56fe4e2a9e24a7c26e47dfb7',
    version: 'API_2.27_java',
    sjzt: '已下架',
    method: '私有化部署',
    orgName: '重庆',
    Request_No: '100100009',
    time: '2020-09-01 13:44:21',
    applyUser: '智志',
    status: 0,
    xjRequest_No: 'A00100200009',
    name: 'OneNET-Core',
    type: '行业能力',
    miaoshu: '提供协议接入、设备安全、命令下发、物模型、系统存储等能力',
    banner: '',
    gushushen: '重庆',
    tigongfang: '中移物联网公司',
    lianxiren: '智志',
    lianxiphone: '18876622089',
    zhuangtai: '已评审',
    shangchuanren: '重庆公司',
    shangchuantime: '2024/1/11 21:10:10',
    shenheren: '',
    shenpitime: '',
    shenpiyijian: ''
  },
  {
    id: 'b39a1266bf4e492ca7178e6bd997e2ab',
    version: 'API_2.29_java',
    sjzt: '已下架',
    method: 'H5',
    orgName: '河北',
    Request_No: '1001000011',
    time: '2020-09-01 13:44:21',
    applyUser: '张三',
    status: 0,
    xjRequest_No: 'A001002000011',
    name: '车辆通行能力',
    type: '行业能力',
    miaoshu: '提供全链路的网络拓扑展示，网络拨测，异常结果告警等能力',
    banner: '',
    gushushen: '重庆',
    tigongfang: '中移物联网公司',
    lianxiren: '叶静宜',
    lianxiphone: '13849038741',
    zhuangtai: '已评审',
    shangchuanren: '河北公司',
    shangchuantime: '2024/1/12 21:10:10',
    shenheren: '',
    shenpitime: '',
    shenpiyijian: ''
  },
  {
    id: 'c498d317d0b147099e9cf0ec6539afdd',
    version: 'API_2.36_java',
    sjzt: '已下架',
    method: 'API',
    orgName: '河北',
    Request_No: '100100018',
    time: '2020-09-01 13:44:21',
    applyUser: '张淑智',
    status: 0,
    xjRequest_No: 'A00100200018',
    name: '视频监控能力',
    type: '通用能力',
    miaoshu: '提供大屏、手机端展示、AI分析等等能力',
    banner: '',
    gushushen: '重庆',
    tigongfang: '中移物联网公司',
    lianxiren: '张淑智',
    lianxiphone: '18822488887',
    zhuangtai: '已评审',
    shangchuanren: '重庆公司',
    shangchuantime: '2024/1/20 21:15:09',
    shenheren: '',
    shenpitime: '',
    shenpiyijian: ''
  }
])
const total = ref(5)
const tableRef = ref()
const loading = ref(true)
const searchForm = ref<any>(defaultForm())
const isDialog = ref(false)
const isDialogs = ref(false)
const isOffDialog = ref(false)
const currentRow = ref<UserInfo>()
const type = ref<HandleType>('add')

function searchTable() {
  tableRef.value?.resetPage()
}
function resetTable() {
  searchForm.value = defaultForm()
  searchTable()
}
const getList = async (val: UserInfo) => {
  let params = { ...val, ...searchForm.value }
  tableData.value = []
  loading.value = true
  const [err, res] = await to(getOperationList(params))
  loading.value = false
  if (err) return
  tableData.value = res || []
  total.value = 10
}

const handle = (currentType: HandleType, row?: UserInfo) => {
  currentRow.value = row
  type.value = currentType
  isDialog.value = true
}
const handleShow = (row?: UserInfo) => {
  currentRow.value = row
  isDialogs.value = true
}
const handleOff = (row?: UserInfo) => {
  currentRow.value = row
  isOffDialog.value = true
}

const handlleDelete = async (row: UserInfo) => {
  const [confirm] = await to(
    ElMessageBox.confirm(`是否删除该用户?`, '温馨提示', {
      type: 'warning',
      draggable: true
    })
  )
  if (confirm) return
  const [err] = await to(deleteUser(row.id))
  if (err) return
  ElMessage.success('删除成功')
  searchTable()
}

const closeDialog = (search: Boolean) => {
  isDialog.value = false
  isOffDialog.value = false
  search && searchTable()
}

const handleExport = () => {}
</script>

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="申请记录" name="1"></el-tab-pane>
      <!-- <el-tab-pane label="已审核" name="2"></el-tab-pane> -->
    </el-tabs>
    <div class="d-header">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="能力名称:">
          <el-input v-model="searchForm.userId" placeholder="能力名称" @change="searchTable()"></el-input>
        </el-form-item>
        <el-form-item label="交付方式:">
          <el-select v-model="searchForm.value" placeholder="交付方式" style="width: 180px">
            <el-option label="API" value="API" />
            <el-option label="SDK" value="SDK" />
            <el-option label="H5" value="H5" />
            <el-option label="独立部署" value="独立部署" />
          </el-select>
          <!-- <el-input v-model="searchForm.email" placeholder="状态" @change="searchTable()"></el-input> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchTable()" icon="Search">查询</el-button>
          <el-button @click="resetTable" icon="Refresh">重置</el-button>
          <el-button type="primary" @click="handleOff('add')">新增下架申请</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="d-content">
      <!-- <div class="action">
        <el-button type="primary" plain @click="handleOff('add')" icon="CirclePlus">新增下架申请</el-button>
      </div> -->
      <one-table ref="tableRef" :data="tableData" :total="total" border row-key="id">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="Request_No" label="下架单号 " align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="xjRequest_No" label="能力编码" align="center" width="130" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="name" label="能力名称 " align="center" width="120" show-overflow-tooltip />
        <!-- <el-table-column prop="tag" label="版本号" align="center" width="120" show-overflow-tooltip /> -->
        <el-table-column prop="type" label="能力分类" align="center" width="100" show-overflow-tooltip />
        <!-- <el-table-column prop="onStatus" label="上架状态" align="center" show-overflow-tooltip /> -->
        <!-- <el-table-column prop="method" label="交付方式" align="center" width="100" show-overflow-tooltip /> -->
        <el-table-column prop="method" label="交付方式" width="110" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag>{{ row.method }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sjzt" label="上架状态" align="center" width="90" show-overflow-tooltip />
        <el-table-column prop="miaoshu" label="描述" align="center" width="130" show-overflow-tooltip />
        <el-table-column prop="version" label="版本号" align="center" width="130" show-overflow-tooltip />
        <!-- <el-table-column prop="banner" label="展示banner" align="center" width="130" show-overflow-tooltip /> -->
        <el-table-column prop="gushushen" label="归属省" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="tigongfang" label="提供方" align="center" width="130" show-overflow-tooltip />
        <el-table-column prop="lianxiren" label="联系人" align="center" width="80" show-overflow-tooltip />
        <el-table-column prop="lianxiphone" label="联系电话" align="center" width="120" show-overflow-tooltip />
        <el-table-column prop="zhuangtai" label="状态" align="center" width="80" show-overflow-tooltip />
        <el-table-column prop="shangchuanren" label="上传人" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="shangchuantime" label="上传时间" align="center" width="170" show-overflow-tooltip />
        <el-table-column prop="shenheren" label="审核人" align="center" width="170" show-overflow-tooltip />
        <el-table-column prop="shenpitime" label="审批时间" align="center" width="170" show-overflow-tooltip />
        <el-table-column prop="shenpiyijian" label="审批意见" align="center" width="170" show-overflow-tooltip />
        <!-- <el-table-column prop="pullCount" label="拉取次数" align="center" width="100" show-overflow-tooltip /> -->
        <el-table-column prop="operator" label="操作" width="60px" align="center" fixed="right">
          <template #default="{ row }">
            <!-- <el-button link type="primary" size="small" icon="Edit" @click="handle('edit', row)"> 审核</el-button> -->
            <a :style="{ color: '#409eff' }" :href="'http://10.12.6.88/demo/ability/' + row.id" target="_blank">详情</a>
            <!-- <el-button link @click="handleShow(row)" type="primary" icon="View" size="small">详情</el-button> -->
          </template>
        </el-table-column>
      </one-table>
    </div>
    <Detail v-if="isDialog" :currentRow="currentRow" :type="type" @close="closeDialog" />
    <Details v-if="isDialogs" :currentRow="currentRow" :type="type" @close="isDialogs = false" />
    <Off v-if="isOffDialog" :currentRow="currentRow" @close="closeDialog" />
  </div>
</template>

<style scoped lang="scss">
.el-tabs {
  margin-top: -10px;
}
</style>
